Canvas Area

This guide explains how to use the Canvas Area effectively and introduces its key features

---

What is the Canvas Area?

The Canvas Area is the visual workspace for building and designing your app's user interface. It displays layouts, where you can:

• Add and arrange widgets to create a user interface.
• Switch between layout breakpoints to ensure responsiveness.
• Add, delete, and resize layouts as needed.

Key Concept: You are not adding widgets directly to the canvas—you add widgets to a layout, which is displayed on the Canvas Area.

---

Working with Layouts

A layout represents a single screen or view of your app. They are critical building blocks for creating multi-screen apps.

Adding/Deleting a New Layout

There are 2 ways to create and delete layouts:

1. Use the Add and Delete Layout icons just above the current layout.
   
2. Use the icon at the top of the project browser to add a new layout, and use the context menu of a layout to delete it.
   

Navigating Between Layouts

• Switch between different layouts by clicking on one in the Project Browser to select it.
• When you select a different layout, it appears on the Canvas Area, replacing the previous layout.

Resizing and Moving Layouts

• Click and drag the edges of the layout to resize it.
• Clicking and dragging the name of the layout in the top left will allow you to move its position on the Canvas Area.
• The Property Inspector can also be used to more precisely update these properties of the layout.

---

Canvas Controls

The Canvas Controls provide tools to work efficiently with your layouts and ensure your designs are responsive.

1. Breakpoint Controls

Directly above the layout in the Canvas Area, you can switch between breakpoints to preview and design your layout for different screen sizes:

• Small (Mobile)
• Medium (Tablet)
• Large (Desktop)

These breakpoints ensure your app looks great on all devices.

Learn more: Designing a Responsive Layout

2. View Controls

• Use the Fit Layout option to automatically center and scale the layout to fit the Canvas Area.

---

Tips for Working with the Canvas Area

1. Stay Organized: Use clear names for layouts and group widgets logically.
2. Test Responsiveness: Regularly switch between breakpoints to ensure your design works across all devices.
3. Leverage Quick Controls: Use the Add and Delete Layout buttons to manage layouts quickly.
4. Combine Tools: Navigate between layouts in the Project Browser and customize widgets in the Property Inspector.

For further learning:

• Creating Layouts
• Designing a Responsive Layout
• Using the Property Inspector